<template>
  <div ref="pieChart" id="myChart"></div>
</template>
<script setup lang="ts">
  import { reactive, ref, onMounted, nextTick, inject, toRefs } from "vue";
  import * as echarts from 'echarts'
  import 'echarts-gl'
  // let echarts = inject("ec")
  let pieChart = ref()
  const props = defineProps({
    internalDiameterRatio: {
        type: Number,
        default: 0
      }
    })
  const { internalDiameterRatio } =toRefs(props)
  console.log(internalDiameterRatio)
  const state = reactive({
  })
  let {  } = state;
  onMounted(() => {
    console.log(echarts)
    initEcharts('111', '222')
  })
  // 渲染echarts图
  const initEcharts = (tdata: string, tname: string) => {
          let myChart = echarts.init(pieChart.value)
          // 传入数据生成option
           // 传入数据生成 option
          let option = getPie3D([
            {
              name: 'bb',
              value: 80,
              itemStyle: {
                color: '#0072BB',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'bb',
              value: 70,
              itemStyle: {
                color: '#42BC92',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'bb',
              value: 60,
              itemStyle: {
                color: '#0072BB',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'aa',
              value: 50,
              itemStyle: {
                color: '#00D7E9',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'aa',
              value: 40,
              itemStyle: {
                color: '#42BC92',
                opacity: 1,
                fontSize: 80
              }
            }], internalDiameterRatio.value);
          myChart.setOption(option)
          option.series.push({
              name: "pie2d",
              type: "pie",
              // label: {
              //   normal: {
              //     formatter: "{a|} \n\r  \n\r  \n\r  {b}   \n{hr|}\n \n \r {d}%  \n  \n \r {c}人  ",
              //     show: true,
              //     // position: 'outside',
              //     position: 'left',
              //     rich: {
              //         a: {
              //             // left: 20,
              //             padding: [0, -80, -15, -80]
              //         },
              //         hr: {
              //             height: 5,
              //             width: 5,
              //             backgroundColor: 't',
              //             lineHeight: 5,
              //             marginBottom: 10,
              //             padding: [0, -5],
              //             borderRadius: 5,
              //             // backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
              //         }
              //     },
              //   },
              // },
              // labelLine: {
              //   show: true,
              //   normal: {
              //       length: 20, //第一条线
              //       length2: 80, //第二条线
              //       lineStyle: {
              //           width: 2, // 线条的宽度
              //       }
              //   }
              // },
              label: {
                  formatter: '{per|{d}%}{b}',
                //标识内容；若要设置标识内容的样式，则需要像这样设置一个变量per或者ng，在rich配置项里去设置这2个变量的样式，则会改变对应标识内容的样式
                  
                  rich: { //设置标识内容样式
                      per: {
                          color: '#2FFFF3',//设置变量per的颜色，即设置{d}%的颜色
                          padding: [2, 4],
                          borderRadius: 2 ,
                          fontSize: 24
                      },
                  }
              },
              labelLine:{//指示线样式设置
                normal: {
                length: 40,//设置指示线的长度
                lineStyle: {
                        color: "#FFFFFF"  // 设置标示线的颜色
                      }
                  }
              },
              startAngle: 0, //起始角度，支持范围[0, 360]。
              clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
              radius: ["80%", "50%"],
              center: ["50%", "50%"],
              data: [
            {
              name: 'bb',
              value: 80,
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'bb',
              value: 70,
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'bb',
              value: 60,
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'aa',
              value: 50,
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                opacity: 1,
                fontSize: 80
              }
            },
            {
              name: 'aa',
              value: 40,
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                opacity: 1,
                fontSize: 80
              }
            }],
              itemStyle: {
              opacity: 0,
              },
          });
          myChart.setOption(option)
      }
      
      // 生成扇形的曲面参数方程，
      function getParametricEquation(startRatio:number, endRatio:number, isSelected: boolean, isHovered: boolean, k:number, h:number){
           // 计算
          let midRatio = (startRatio + endRatio) / 2;

          let startRadian = startRatio * Math.PI * 2;
          let endRadian = endRatio * Math.PI * 2;
          let midRadian = midRatio * Math.PI * 2;

          // 如果只有一个扇形，则不实现选中效果。
          if (startRatio === 0 && endRatio === 1) {
              isSelected = false;
          }

          // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
          k = typeof k !== 'undefined' ? k : 1 / 3;

          // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

          // 计算高亮效果的放大比例（未高亮，则比例为 1）
          let hoverRate = isHovered ? 1.05 : 1;
          // 返回曲面参数方程
          return {
               u: {
                  min: -Math.PI,
                  max: Math.PI * 3,
                  step: Math.PI / 32
              },
              v: {
                  min: 0,
                  max: Math.PI * 2,
                  step: Math.PI / 20
              },

              x: function(u: number, v:number) {
                  if (u < startRadian) {
                      return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                  }
                  if (u > endRadian) {
                      return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                  }
                  return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
              },

              y: function(u:number, v:number) {
                  if (u < startRadian) {
                      return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                  }
                  if (u > endRadian) {
                      return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                  }
                  return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
              },

              z: function(u:number, v:number) {
                  if (u < -Math.PI * 0.5) {
                      return Math.sin(u);
                  }
                  if (u > Math.PI * 2.5) {
                      return Math.sin(u) * h * .1;
                  }
                  return Math.sin(v) > 0 ? 1 * h * .1 : -1;
              }
          }
      }

      // 生成模拟3d饼图的配置项
      function getPie3D(pieData: any, internalDiameterRatio: number) {
          let series = [];
          let sumValue = 0;
          let startValue = 0;
          let endValue = 0;
          let legendData = [];
          let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;


          // 为每一饼图数据，生成一个series-surface配置
          for(let i = 0; i < pieData.length; i++){
               sumValue += pieData[i].value;

              let seriesItem = {
                  name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
                  type: 'surface',
                  parametric: true,
                  wireframe: {
                      show: false
                  },
                  pieData: pieData[i],
                  pieStatus: {
                      selected: false,
                      hovered: false,
                      k: k
                  },
                  itemStyle: {
                    color: '',
                    opacity: ''
                  },
                  parametricEquation: {},
              };
             if (typeof pieData[i].itemStyle != 'undefined') {

                      let itemStyle = {
                        color: '',
                        opacity: ''
                      };

                      typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
                      typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
                      seriesItem.itemStyle = itemStyle;
                  }
                  series.push(seriesItem);
              }
              

           // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
          for (let i = 0; i < series.length; i++) {
              endValue = startValue + series[i].pieData.value;

              series[i].pieData.startRatio = startValue / sumValue;
              series[i].pieData.endRatio = endValue / sumValue;
              series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

              startValue = endValue;

              legendData.push(series[i].name);
          }
          // 补充一个透明圆环，用于支撑高亮功能近似实现
          series.push({
              name: 'mouseoutSeries',
              type: 'surface',
              parametric: true,
              wireframe: {
                  show: false
              },
              itemStyle: {
                  opacity: 0
              },
              parametricEquation: {
                  u: {
                      min: 0,
                      max: Math.PI * 2,
                      step: Math.PI / 20
                  },
                  v: {
                      min: 0,
                      max: Math.PI,
                      step: Math.PI / 20
                  },
                  x: function(u: number, v: number) {
                      return Math.sin(v) * Math.sin(u) + Math.sin(u);
                  },
                  y: function(u: number, v: number) {
                      return Math.sin(v) * Math.cos(u) + Math.cos(u);
                  },
                  z: function(u: number, v: number) {
                      return Math.cos(v) > 0 ? 0.1 : -0.1;
                  }
              },
              pieData: {},
              labelLine: {

              },
              startAngle: NaN,
              clockwise: false
          });
          let option = {
              // legend: {
              //     data: legendData
              // },
              title: {
                  text: `${111}-${222}`,
                  top: 'bottom',
                  left: 'center',
                  textStyle: {
                      color: '#ffffff',
                      fontSize: 50,
                      fontWeight: 'bold'
                  }
              },
              tooltip: {
                  formatter: (params: any) => {
                    console.log(2222222,option)
                      if (params.seriesName !== 'mouseoutSeries') {
                          return `
                          ${params.seriesName}
                          <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
                          ${option.series[params.seriesIndex].pieData.value}`;
                      }
                  }
              },
              // xAxis3D: {
              //     min: -1,
              //     max: 1
              // },
              // yAxis3D: {
              //     min: -1,
              //     max: 1
              // },
              // zAxis3D: {
              //     min: -1,
              //     max: 1
              // },
              xAxis3D: {
                  min: -2,
                  max: 2
              },
              yAxis3D: {
                  min: -2,
                  max: 2
              },
              zAxis3D: {
                  min: -1,
                  max: 1
              },
              grid3D: {
                  show: false,
                  boxHeight: 5,
                  viewControl: {//3d效果可以放大、旋转等，请自己去查看官方配置
                      alpha: 30,
                      // beta: 40,
                      rotateSensitivity: 0,
                      zoomSensitivity: 0,
                      panSensitivity: 0,
                      autoRotate: false
                  },
                  //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
                  postEffect: {//配置这项会出现锯齿，请自己去查看官方配置有办法解决 
                      enable: true,
                      bloom: {
                          enable: true,
                          bloomIntensity: 0.1
                      },
                      SSAO: {
                          enable: true,
                          quality: 'medium',
                          radius: 2
                      }
                  }
              },
              series: series
          }
          return option
      }
</script>
<style lang="less">
  #myChart{
    width: 100%;
    height: 100%;
  }
</style>